<template>
    <div class="">
        <div class="addBox">
            <div class="label">分组名称{{farmId}}</div>
            <el-input v-model="groupName" placeholder="输入地块分组名称" clearable />
            <div style="padding: 0 0 0 10px;">
                <el-button type="success" plain @click="add">添加</el-button>
            </div>
        </div>
        <c-table ref="tableRef" :page="{ pageSize:limit, pageIndex:page, total }" :lists="tableData" @current-change="handleCurrentChange" :highlightCurrentRow="true" className="small-el-table"
    @size-change="handleSizeChange" :loading="loading" rowKey="companyId" @table-current-change="tableCurrentChange">
            <el-table-column label="分组名称" min-width="150" prop="groupName" />
            <el-table-column label="操作" width="70px">
                <template #default="scope">
                    <el-button type="text" icon="delete" size="small" @click="del(scope.row)">删除</el-button>
                </template>
                </el-table-column>
        </c-table>
        <div class="addbtnbox">
            <el-button size="small" @click="close">取 消</el-button>
            <el-button size="small" type="primary" @click="setSl">确 定</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import{useRouter,useRoute} from "vue-router"
import { message } from '@/utils/element'
import { ElMessageBox } from 'element-plus'
import {getLandGroupList,addGroup,delGroup} from '@/api/plant'
import cTable from '@/components/custom/cTable.vue'

const router = useRouter()

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object,
    type:Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['close','comfirm'])

const farmId = ref('') // 农场id
const page = ref(1)
const limit = ref(10)
const total = ref(0)
const tableData = ref([])
const loading = ref(true)
const tableRef = ref(null)
const groupName = ref(null)
const currentItem = ref({})


onMounted(()=>{
    farmId.value = router.currentRoute.value.query.farmId
    getTableData()
})

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}
// 分页
const handleSizeChange = (val) => {
  page.value = 1
  limit.value = val
  getTableData()
}

const tableCurrentChange = (item)=>{
    //console.log("选择表格数据",item)
    currentItem.value = item
}

const setSl = ()=>{
    emit('comfirm',currentItem.value)
    close()
}

const add = async() => {
    if(!groupName.value){
        return message('输入地块分组名称',3)
    }
    const res = await addGroup({
        groupName:groupName.value,
        farmId:farmId.value
    })
    if(res.code == 0){
        //message('数据提交成功',2)
        //emit('success')
        //close()
        page.value = 1
        groupName.value = ''
        getTableData()
    }else{
        message(res.message,3) 
    }
}

const getTableData = async ()=>{
    const res = await getLandGroupList({
        page: page.value, 
        limit: limit.value,
        farmId:farmId.value
    })
    if(res.code ==0 ){
        tableData.value = res.data
        total.value = res.total
    }
    loading.value = false
}

const del = (item)=>{
    ElMessageBox.confirm('确认删除吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await delGroup([item.landGroupId])
        if(res.code ==0 ){
            page.value = 1
            getTableData()
        }
    }).catch(() => {
       // message('删除失败',3) 
    })
}


const close = () => {
    emit('close')
}
</script>
<style lang="scss" scoped>
    .addBox{
        display: flex;
        height: 40px;
        line-height: 30px;
        .label{
            width: 70px;
        }
        
    }
    .addbtnbox{
        display: flex;
        justify-content: end;
    }
</style>
